<!-- 张鑫 -->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  

    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
    <!-- <script language="javascript" src="../js/jquery.js" ></script>  --> 
    <script language="javascript" src="../js/ajaxfileupload.js"> </script>   
  <!--   <script language="javascript" type="text/javascript" src="../js/ezeditor.js"></script>  -->
<title>用户信息管理</title>
<link rel="stylesheet" type="text/css"
href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/demo/demo.css">
<script type="text/javascript" src="../js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>


    
<script type="text/JavaScript" src="../js/user/edit.js"></script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>


<script type="text/javascript">
	var url;
	
	function editUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
			/* $('#fm').form('load'); */
			url = '../userServlet?param=edit&id='+row.id;
			

		}
	}
	
	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {

				var date = eval('(' + result + ')');
				if (date.success) {
					$('#dlg').dialog('close'); // close the dialog
					$('#dg').datagrid('reload'); // reload the user data
				} else {
					$.messager.show({
						title : 'Error',
						msg : result.msg
					});
				}
			}
		});
	}
	
	
	 Date.prototype.format = function(format) {  
	        var o = {  
	            "M+": this.getMonth() + 1, // month  
	            "d+": this.getDate(), // day  
	            "h+": this.getHours(), // hour  
	            "m+": this.getMinutes(), // minute  
	            "s+": this.getSeconds(), // second  
	            "q+": Math.floor((this.getMonth() + 3) / 3),
	            "S": this.getMilliseconds()  
	            // millisecond  
	        }  
	        if (/(y+)/.test(format))  
	            format = format.replace(RegExp.$1, (this.getFullYear() + "")  
	                .substr(4 - RegExp.$1.length));  
	        for (var k in o)  
	            if (new RegExp("(" + k + ")").test(format))  
	                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));  
	        return format;  
	    }  
	 
	$(document).ready(function () {
		$('#dg').datagrid({
		    pagination:true,
		    fitColumns:true,
		    singleSelect:true,
		    rownumbers:true,
		    url:'../GetUsersServlet',
		    columns:[[
		{field:'name',title:'Name',width:100},
        {field:'password',title:'Password',width:100},
        {field:'rname',title:'Rname',width:100},
        {field:'cardtype',title:'Cardtype',width:100},
        {field:'card',title:'Card',width:100},
        {field:'sex',title:'Sex',width:100},
        {field:'birthday',title:'Birthday',width:100},
        {field:'province',title:'Province',width:100},
        {field:'city',title:'City',width:100},
        {field:'type',title:'Type',width:100},
        {field:'content',title:'Content',width:100,align:'right'}
		    ]]
		});

	function formatDatebox(value) {  
	    if (value == null || value == '') {  
	        return '';  
	    }  
	    var dt;  
	    if (value instanceof Date) {  
	        dt = value;  
	    } else {  
	        dt = new Date(value);  
	    }  
	  
	    return dt.format("yyyy-MM-dd hh:mm:ss"); //扩展的Date的format方法(上述插件实现)  
	}
});
	$(document).ready(function () {
	 var p = $('#dg').datagrid('getPager');  
	                $(p).pagination({  
	                pageSize: 10,//每页显示的记录条数，默认为5  
	                pageList: [10, 20 ,30],//可以设置每页记录条数的列表  
	                beforePageText: '第',//页数文本框前显示的汉字  
	                afterPageText: '页    共 {pages} 页',  
	                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
	            });  
	
	}); 
	
</script>

<script language="javascript">
	function UpdateInfo(){
		window.location.href = "UsersEdite.jsp";
	}
</script>

 <script type="text/javascript">  
    function ajaxFileUpload()  
    {  
      
    $("#loading")  
        .ajaxStart(function(){  
            $(this).show();  
        })//开始上传文件时显示一个图片  
        .ajaxComplete(function(){  
            $(this).hide();  
        });//文件上传完成将图片隐藏起来  
          
       $.ajaxFileUpload({  
                 url:'<%=basePath %>FileUpload',             //需要链接到服务器地址  
//url:'/xxx/xxx/xxx/images/upload.htm?token=tokenstring',//适用于方法一
                 secureuri:false,  
                 fileElementId:'uploadFileInput',                         //文件选择框的id属性  
                 dataType: 'json',                                     //服务器返回的格式，可以是json  
                 success: function (data, status)             //相当于java中try语句块的用法  
                 {     
                 //alert(data);       //data是从服务器返回来的值     
                     $('#result').html('上传图片成功!请复制图片地址<br/>'+data.src);  
   
                 },  
                 error: function (data, status, e)             //相当于java中catch语句块的用法  
                 {  
                     $('#result').html('上传图片失败');  
                 }  
               }  
             );  
    }  
    </script>  

</head>
<body>
	<h2>用户信息管理</h2><td width="230" colspan="-1" rowspan="7" align="center" background="../images/bg_point_write.gif" class="text_cray1"><img src="../images/photo_mr.jpg" width="120">              
             
   <form method="post" action="servlet/UploadServlet" enctype="multipart/form-data">
	选择一个文件:
	<input type="file" name="uploadFile" ></input>
	<%=basePath %>
	<img alt="" src="basePath">
	<br/><br/>
	<input type="submit" value="上传" />

</form>
	<div class="demo-info" style="margin-bottom: 10px">
		<div class="demo-tip icon-tip"> </div>
		<div>点击下面的功能按钮，实现对用户信息的操作</div>
	</div>
	<table id="dg" title="用户信息" class="easyui-datagrid"
		style="width: 1041px; height: 430px" toolbar='#toolbar',>
		
	</table>
	<div id="toolbar">
		 <a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick=editUser();>修改</a> 
	</div>

	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 380px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">用户信息</div>
		<form id="fm" method="post" novalidate>

			<div class="fitem">
				<label> 用户名: </label> <input name="name" class="easyui-validatebox"
					data-options="required:true,validType:'name'">
			</div>
			<div class="fitem">
				<label> 用户密码: </label> <input name="password"
					class="easyui-validatebox" data-options="required:true,validType:'password'">
			</div>
			<div class="fitem">
				<label> 真实名字: </label> <input name="rname" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label> 证件类型: </label> <input name="cardtype"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 证件号码: </label> <input class="easyui-datetimebox"
					name="card" data-options="required:true,validType:'card'"
					style="width:150px">
			</div>
			<div class="fitem">
				<label>性别: </label> <input name="sex"
					class="easyui-validatebox" data-options="required:true,validType:'sex'">
			</div>
			<div class="fitem">
				<label>出生日期: </label> <input name="birthday"
					class="easyui-validatebox" data-options="required:true,validType:'birthday'">
			</div>
			<div class="fitem">
				<label>省份: </label> <input name="province"
					class="easyui-validatebox" data-options="required:true,validType:'province'">
			</div>
			<div class="fitem">
				<label>城市: </label> <input name="city"
					class="easyui-validatebox" data-options="required:true,validType:'city'">
			</div>
			<div class="fitem">
				<label>游客类型: </label> <input name="type"
					class="easyui-validatebox" data-options="required:true,validType:'type'">
			</div>
			<div class="fitem">
				<label>备注: </label> <input name="content"
					class="easyui-validatebox" data-options="required:true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick=saveUser();>保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close');">取消</a>
	</div>
</body>
</html>